<nzi-form [formName]="triggerForm" #triggerFormComponent>
  <form nz-form [formGroup]="triggerForm">
    <nz-form-item *ngIf="!isDetail && !triggerInstance">
      <nz-form-label>应用<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <nz-select formControlName="groupId" [nzShowSearch]="true" nzShowSearch [(ngModel)]="groupId"
          nzPlaceHolder="请选择应用" [nzLoading]="isLoadingApplication" (ngModelChange)="getFunctionList(groupId)"
          nzNotFoundContent="没有可用的应用">
          <nz-option *ngFor="let object of applicationList" [nzLabel]="object.displayName" [nzValue]="object.id">
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="!isDetail && !triggerInstance">
      <nz-form-label>函数<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <nz-select formControlName="functionId" [nzShowSearch]="true" nzShowSearch [(ngModel)]="functionId"
          (ngModelChange)="functionChange($event)" nzPlaceHolder="请选择函数" [nzLoading]="isLoadingFunction"
          nzNotFoundContent="没有可用的函数">
          <nz-option *ngFor="let object of functionList" [nzLabel]="object.functionName" [nzValue]="object.functionId"
            [nzDisabled]="disableFunctionOption">
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="!triggerInstance">
      <nz-form-label>触发器类型<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <nz-select formControlName="type" [nzShowSearch]="true" nzShowSearch nzPlaceHolder="请选择触发器类型"
          [(ngModel)]="triggerType" nzNotFoundContent="没有可用的触发器类型" (ngModelChange)="changeTrigger()">
          <nz-option *ngFor="let type of typeList" [nzLabel]="type.label" [nzValue]="type.value"
            [nzDisabled]="(type.value != 'http' && functionRuntime == 'custom-container') || (type.value == 'http' && functionRuntime != 'custom-container')">
          </nz-option>
        </nz-select>
        <nz-form-explain *ngIf="triggerType==='apig'" class="help-text">
          {{ apigTip }} </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="triggerInstance">
      <nz-form-label>触发器类型<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="typeName" placeholder="触发器类型" [maxlength]="20" readonly [disabled]="true">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>触发器名称<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="name" placeholder="请输入触发器名称" [maxlength]="20" [readonly]="triggerInstance"
          [disabled]="triggerInstance">
        <ng-container *ngIf="triggerForm.get('name').dirty && triggerForm.get('name').errors" class="from-help">
          <nz-form-explain *ngIf="triggerForm.get('name').hasError('name')">
            由小写字母、数字和中划线组成，长度为 2-20 个字符，以小写字母开头，以<br />小写字母或数字结尾
          </nz-form-explain>
          <nz-form-explain *ngIf="triggerForm.get('name').hasError('duplicated')">
            该名称已存在
          </nz-form-explain>
        </ng-container>
        <nz-form-explain *ngIf="!getInvalidMessage('name')">
          由小写字母、数字和中划线组成，长度为 2-20 个字符，以小写字母开头，以<br />小写字母或数字结尾</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>触发版本</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="targetName" nzPlaceHolder="请选择触发版本"
          [nzDisabled]="triggerInstance && triggerType=='apig'">
          <nz-option *ngFor="let object of versionList" [nzLabel]="object.label" [nzValue]="object.value">
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <ng-container [ngSwitch]="triggerType">
      <ng-container *ngSwitchCase="'timer'">
        <nz-form-item>
          <nz-form-label>触发规则<span *ngIf="isCrontab" class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <nz-radio-group formControlName="triggerRule" [(ngModel)]="triggerRule"
              (ngModelChange)="triggerRuleChange()">
              <label nz-radio-button nzValue="static">固定时间间隔</label>
              <label nz-radio-button nzValue="cron">Crontab表达式</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
        <ng-container *ngIf="triggerRule=='static'">
          <nz-form-item>
            <nz-form-control>
              <nz-input-number formControlName="staticNum" (ngModelChange)="staticChange()" [nzMin]="1" [nzMax]="10000"
                [nzStep]="1" nz-popover nzContent="1-10000">
              </nz-input-number>
              <nz-select formControlName="staticUnit" class="static-unit">
                <nz-option *ngFor="let time of timeList" [nzLabel]="time.label" [nzValue]="time.value"
                  (ngModelChange)="staticChange()">
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </ng-container>
        <ng-container *ngIf="triggerRule=='cron'">
          <nz-form-item>
            <nz-form-control>
              <input nz-input formControlName="cron" placeholder="请输入crontab表达式">
              <!-- <nzi-help [options]="{'title':'支持 Unix crontab 语法，格式为：<分钟> <小时> <日> <月份> <星期>'}"></nzi-help> -->
              <nz-form-explain >
                支持 Unix crontab 语法，格式为：<分钟> <小时> <日> <月份> <星期>，例如* * 1 * *
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </ng-container>
        <nz-form-item>
          <nz-form-label>是否启用</nz-form-label>
          <nz-form-control>
            <nz-switch formControlName="isEnable"></nz-switch>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>自定义消息</nz-form-label>
          <nz-form-control>
            <nz-switch formControlName="openInvoke" [(ngModel)]="openInvokeEvent"
              (ngModelChange)="openInvokeEventChange()"></nz-switch>
            <nzi-help [options]="{'title':'当定时触发器触发函数执行时，函数的event参数。'}"></nzi-help>
            <ngx-monaco-editor *ngIf="openInvokeEvent" formControlName="param" [options]="editorOptions"
              class="monaco-editor" [(ngModel)]="invokeEvent">
            </ngx-monaco-editor>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
      <ng-container *ngSwitchCase="'oss'">
        <nz-form-item>
          <nz-form-label>OSS Bucket<span class="required-icon">*</span></nz-form-label>
          <nz-form-control *ngIf="!triggerInstance">
            <nz-select formControlName="ossBucket" [(ngModel)]="ossBucket" [nzShowSearch]="true" nzShowSearch
              nzPlaceHolder="请选择OSS Bucket" nzNotFoundContent="没有可用的 Bucket" [nzAutoClearSearchValue]="false"
              [nzLoading]="isLoadingBucket">
              <nz-option *ngFor="let object of ossBucketList" [nzLabel]="object.label" [nzValue]="object.value">
              </nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-control *ngIf="triggerInstance">
            <input nz-input formControlName="ossBucket" readonly disabled />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>触发事件<span class="required-icon">*</span></nz-form-label>
          <nz-form-control *ngIf="!triggerInstance">
            <nz-select formControlName="ossTrigger" [(ngModel)]="ossTrigger" nzPlaceHolder="请选择触发事件">
              <nz-option *ngFor="let object of ossTriggerList" [nzLabel]="object.label" [nzValue]="object.value">
              </nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-control *ngIf="triggerInstance">
            <input nz-input formControlName="ossTrigger" readonly disabled />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>前缀过滤</nz-form-label>
          <nz-form-control>
            <input formControlName="ossTriggerPre" nz-input placeholder="请输入需要过滤的前缀" [disabled]="triggerInstance">
            <nzi-help
              [options]="{'title':'前缀过滤通常用于过滤指定目录下的文件事件，例如前缀过滤为 test/，则仅 test/ 目录下的文件事件才可以触发函数，hello/ 目录下的文件事件不应该触发函数。'}">
            </nzi-help>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>后缀过滤</nz-form-label>
          <nz-form-control>
            <input formControlName="ossTriggerSuf" nz-input placeholder="请输入需要过滤的后缀" [disabled]="triggerInstance">
            <nzi-help
              [options]="{'title':'后缀过滤通常用于过滤指定类型或后缀的文件事件，例如后缀过滤为 .jpg，则仅 .jpg 结尾的文件的事件才可以触发函数，.png 结尾的文件不应该触发函数。'}">
            </nzi-help>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
      <ng-container *ngSwitchCase="'apig'">
        <nz-form-item>
          <nz-form-label>API分组<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <nz-select formControlName="apigGroup" nzPlaceHolder="请选择API分组" nzShowSearch
              [nzLoading]="isLoadingApigGroup" nzNotFoundContent="没有可用的API分组" [(ngModel)]="apigGroupId"
              [nzDisabled]="triggerInstance">
              <nz-option *ngFor="let object of apigGroupList" [nzLabel]="object?.groupName" [nzValue]="object?.id">
              </nz-option>
            </nz-select>
            <button nz-button class="table-top-opt" (click)="refreshTriggerList()" nz-popover [nzContent]="'刷新'"  style="margin: 0 0 0 5px;vertical-align: 1px;">
              <i class="anticon anticon-reload"></i></button>
            <a class="create-group" href="javascript:void(0);" (click)="createApigGroup()">创建API分组</a>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>发布环境<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <nz-select formControlName="apigEnvironment" nzPlaceHolder="请选择发布环境" nzShowSearch [(ngModel)]="isRelease"
              [nzDisabled]="triggerInstance">
              <nz-option *ngFor="let object of apigEnvironmentList" [nzLabel]="object?.label" [nzValue]="object?.value">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>安全认证<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <nz-select formControlName="apigAuth" nzPlaceHolder="请选择安全认证方式" [(ngModel)]="authenticationMode"
              [nzDisabled]="triggerInstance">
              <nz-option *ngFor="let object of apigAuthList" [nzLabel]="object.label" [nzValue]="object.value">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>请求协议<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <nz-select formControlName="apigProtocal" nzPlaceHolder="请选择请求协议" [(ngModel)]="requestProtocol"
              [nzDisabled]="triggerInstance">
              <nz-option *ngFor="let object of apigProtocalList" [nzLabel]="object.label" [nzValue]="object.value">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>请求方法<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <nz-select formControlName="apigMethod" nzPlaceHolder="请选择请求方法" [(ngModel)]="requestMethod"
              [nzDisabled]="triggerInstance">
              <nz-option *ngFor="let object of apigMethodList" [nzLabel]="object.label" [nzValue]="object.value">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>后端超时（ms）<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <input type="text" nz-input formControlName="apiTimeout" placeholder="请输入超时时间" [(ngModel)]="backendTimeout"
              [disabled]="triggerInstance">
            <nz-form-explain *ngIf="getValidateForm('apiTimeout').dirty && getValidateForm('apiTimeout').errors">
              <ng-container>由数字组成，不能以0开头,范围是0-999999999</ng-container>
            </nz-form-explain>
            <nz-form-explain *ngIf="!(getValidateForm('apiTimeout').dirty && getValidateForm('apiTimeout').errors)"
              class="help-text">由数字组成，不能以0开头，范围是0-999999999</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
      <ng-container *ngSwitchCase="'http'">
        <nz-form-item>
          <nz-form-label>认证方式<span class="required-icon">*</span></nz-form-label>
          <nz-form-control>
            <nz-radio-group formControlName="httpAuthType">
              <label nz-radio-button nzValue="anonymous">Anonymous</label>
              <label nz-radio-button nzValue="iam">IAM 认证</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
      <ng-container *ngSwitchDefault>
      </ng-container>
    </ng-container>

  </form>
</nzi-form>